<!-- Login/Signup Modal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog container" id="loginSignupContainer" role="document">
    <div class="modal-content">
      <div class="modal-body">

        <!-- close button -->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>

        <div class="clearfix"> <!-- clearfix class allows the modal to expand to fit the content of this div -->
          <div id="signupContainer">
            <!-- signup partial -->
            <% unless current_page?('/signup') %>
            <%= render partial: "users/create_form" , locals: {caller: "modal"} %>
            <% end %>
          </div>

          <div id="loginContainer">
            <!-- login partial -->
            <% unless current_page?('/login') %>
            <%= render partial: "user_sessions/form" %>
            <% end %>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>

<!-- Modal jquery -->
<script>

  var mode = ""; // Either "login" or "signup". Used later to load partials

  // Setter function for mode
  function setMode(modalMode){
    mode = modalMode;
  }

  // When this modal is toggled, run the following
  $('#loginModal').on('show.bs.modal', function toggleModal(event) {
    var modal = $(this);

    function showSignup() {
      modal.find(".modal-dialog").addClass("modal-lg"); //Expands modal to show signup content better
      modal.find('#signupContainer').show(); //Unhides the signup partial
      modal.find('#loginContainer').hide(); //Hides the login partial
    }
    
    function showLogin() {
      modal.find(".modal-dialog").removeClass("modal-lg"); //Minimises the modal size for better aesthetis
      modal.find('#loginContainer').show(); // Unhides the login partial
      modal.find('#signupContainer').hide(); //Hides the signup partial
    }

    if (mode == "signup") showSignup(); //If the mode that has been set is "signup", show the signup part of the partial
    else showLogin(); //Show the login partial otherwise

    // Function runs when the "login" button in the signup modal is clicked
    $(".modal #toLogin").click(function clickLogin(e) {
      e.preventDefault(); // disable the link
      var user = $("#signupContainer").find("#username-login").val(); //Username and password data is transferred to the other partial
      var pass = $("#signupContainer").find("#password").val();
      showLogin(); // Modal switches to login view
      $("#loginContainer").find("#username-login").val(user);
      $("#loginContainer").find("#password-signup").val(pass);
    });

    // Function runs when the "sign up to join" link in the login modal is clicked 
    $(".modal #toSignup a").click(function clickSignup(e) {
      e.preventDefault(); // disable the link
      var user = $("#loginContainer").find("#username-signup").val(); //Username and password data is transferred to the other partial
      var pass = $("#loginContainer").find("#password-signup").val();
      showSignup(); // Modal switches to sign up view
      $("#signupContainer").find("#username-signup:visible").val(user);
      $("#signupContainer").find("#password").val(pass);
    });
  });

</script>

<!-- The following css allows the modal to appear in the center of the screen -->
<style>
  #loginModal {
    text-align: center;
  }

  @media (max-width:575px){
    .modal-content{
      margin-top:0vh;
      margin-right:-10px;
    }
  }
    @media (max-width:390px){
    .modal-content{
      margin-top:0vh;
      margin-right:-50px;
    }
  }
    @media (max-width:350px){
    .modal-content{
      margin-right:-50px;
    }
  }
  #loginModal:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-right: -4px;
  }

  #loginModal .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
  }
</style>
